<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/jquery-1.10.1.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapAll {
      padding: 10px;
    }

    .buttons button+button {
      margin-left: 10px;
    }

    .wrap {
      width: 1100px;
      height: 600px;
      border: 1px solid #333;
      margin-top: 10px;
      position: relative;
    }

    .sub {
      width: 100px;
      height: 100px;
      background-color: #6ff;
      position: absolute;
      left: 00px;
    }
  </style>
</head>

<body>
  <div class="wrapAll">
    <div class="buttons">
      <button class="start">开始</button>
      <button class="stop">stop(false,false)</button>
      <button class="stop">stop(false,true)</button>
      <button class="stop">stop(true,true)</button>
      <button class="stop">stop(true,false)</button>
      <button class="finish">finish</button>
      <button class="isAni">匹配正在运动的元素</button>
    </div>
    <div class="wrap">
      <div class="sub"></div>
    </div>
  </div>
</body>
<script>
  // $(ele).animate(params,speed,callback)
  // ele     运动的元素
  // params  运动的属性 及其 终点值  {left:1000,top:500}
  // speed   三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
  // callback  在动画完成时执行的函数，每个元素执行一次。

  // $(ele).stop(clearQueue,jumpToEnd) 
  // clearQueue   是否清空队列
  // true   清空队列 => 位于队列之后的运动不在执行
  // false  (默认)不清空队列 => 立即结束当前运动 进入下一个运动

  // jumpToEnd   是否立即到达终点
  // true   立即到达终点  => 如果有回调函数,会执行运动结束对应的回调函数   
  // false  (默认)不立即到达终点,停留在当前位置  => 后续有运动队列,而是由当前位置 进入下一次运动

  // finish()  停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画


  // 运动队列 [{left:1000},{top:500},{left:0},{top:0}]
  $(".start").click(function () {
    $(".sub").animate({ left: 1000 }, 2000, function () {
      console.log("运动完毕1");
    }).animate({ top: 500 }, 1000, function () {
      console.log("运动完毕2");
    }).animate({ left: 0 }, 2000, function () {
      console.log("运动完毕3");
    }).animate({ top: 100 }, 1000, function () {
      console.log("运动完毕4");
    })
  })

  $(".stop").eq(0).click(function () {
    // stop(false,false)   
    // false 不清空队列,跳过本次进入下一次
    // false 不立即到达终点,停留在当前位置
    // => 后续有运动队列,而是由当前位置 进入下一次运动
    $(".sub").stop(false, false);
  })
  $(".stop").eq(1).click(function () {
    // stop(false,true)   
    // false 不清空队列,跳过本次进入下一次
    // true 立即到达终点
    // => 后续有运动队列,立即由当前位置到达终点 进入下一次运动
    $(".sub").stop(false, true);
  })
  $(".stop").eq(2).click(function () {
    // stop(true,true)   
    // true 清空队列,后续的运动不在执行
    // true 立即到达终点
    // => 清空队列,立即到达本次运动的终点
    $(".sub").stop(true, true);
  })
  $(".stop").eq(3).click(function () {
    // stop(true,false)   
    // true 清空队列,后续的运动不在执行
    // false 不立即到达终点,停留在当前位置
    // => 清空队列,停留在当前位置
    $(".sub").stop(true, false);
  })
  $(".finish").click(function () {
    // finish()   
    $(".sub").finish();
  })
  $(".isAni").click(function () {
    // finish()   
    //    console.log($(":animated"));  // 匹配正在运动的元素

    console.log($(".sub").is(":animated"));
  })


    // 电商网站  
    // 登录 注册  主页面(轮播图)  
    // 列表(搜索 查询 排序) 详情(放大镜)  购物车   结算

    // 组员   项目名称   原网站    上线地址
</script>

</html>